<template lang="html">
  <div id="charts">
    <div id="ots" :style="{width:'100%',height:'100%'}"></div>
  </div>
</template>

<script>
import co from 'co'
import echarts from 'echarts'
import {HttpResetClass } from 'vue-client'

let getData = function * (self) {
      console.log(self.con1 + self.con2 + self.con3 + self.con4)
      console.log(self.tablename)
      console.log(self.condition)

  if (self.tablename === 't_changemeter') {
    self.con1 = self.condition
  } else if (self.tablename === 't_transfer') {
    self.con2 = self.condition
  } else if (self.tablename === 't_fillcard') {
    self.con3 = self.condition
  } else if (self.tablename === 't_fillgas'){
    self.con4 = self.condition
  }
    console.log(self.con1 + self.con2 + self.con3 + self.con4)
  let load = new HttpResetClass()

  load.load('POST','rs/sql/OtherNum',
  {data: {con1: self.con1, con2: self.con2,con3: self.con3,con4: self.con4}},
  {resolveMsg: null, rejectMsg: null})
  .then((res) => {
    let namedata = []
    let numdata = []
    for (var i = 0; i < res.data.length; i++) {
        namedata.push(res.data[i].name)
        numdata.push(res.data[i].c)
      }
      self.set(numdata,namedata)
  })
}
export default {
  props: ['condition', 'tablename'],
 data () {
   return {
     xc: '',
     con: '',
     con1: '1=1',
     con2: '1=1',
     con3: '1=1',
     con4: '1=1'
   }
 },
 methods: {
   set (numdata,namedata) {
     this.xc = echarts.init(document.getElementById('ots'))
     this.xc.setOption({
       color: ['#3398DB'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            // data : ['t_changemeter', 't_fillcard', 't_fillgas','t_transfer'],
            data : namedata,
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'数量数据',
            type:'bar',
            barWidth: '60%',
            data:numdata
        }
    ]
     })
     this.con1 = '1=1'
     this.con2 = '1=1'
     this.con3 = '1=1'
     this.con4 = '1=1'
     console.log(this.con1 + this.con4 + this.con3 + this.con2)
   },
   searchdata () {
     let getGen =getData(this)
     co(getGen)
   },
   replacestr (str,rstr) {
     if (str.indexOf(rstr) >= 0) {
       this.replacestr(str.replace(rstr, ''), rstr)
     } else {
       if (true) {
         this.con1 = str
       } else if (true) {
         this.con2 = str
       } else if (true) {
         this.con3 = str
       } else {
         this.con4 = str
       }
     }
   }
 },
 watch: {
   'condition' (val) {
      this.searchdata()
   },
   'tablename' (val) {
     this.searchdata()
   }
 },
 ready () {
   this.searchdata()
 }

}
</script>
<style lang="css">
#charts div{
  height: auto;
}
</style>
